<style lang='less' scoped>
.shop-item{
	width: 173px;
	position: relative;
	background: #fff;
	margin: 5px 0px;
	.shop-item__tag{
		position: absolute;
		left: 0;
		top: 0;
		width: 27px;
		height: 27px;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.shop-item__remove{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
		z-index: 2;
		.shop-item__icon{
			width: 40px;
			height: 40px;
			background: rgba(255, 255, 255, .3);
			margin: auto;
			border-radius: 50%;
		}
	}
	.shop-item__desc{
		padding: 8px;
	}
	.shop-item__img{
		width: 100%;
		overflow: hidden;
		width: 173px;
		height: 173px;
	}
}

</style>

<template>
    <div class="shop-item" @click="clickFn" @longpress.stop="longtap">
		<div class="shop-item__img">
			<img src="https://img.alicdn.com/imgextra/i1/2906726927/TB2RowQaLNNTKJjSspfXXbXIFXa_!!2906726927-0-daren.jpg_180x180xzq90.jpg_.webp" mode="widthFix">
		</div>
		<div class="shop-item__desc">
			<p class="shop-item__name text-overflow__1 MB-15 MT-5">2018春秋款2018春秋款2018春秋款2018春秋款</p>
			<p class="shop-item__price text-main">
				<span class="text-12">￥</span>666
			</p>
			<p class="shop-item__sales text-12 text-gray flex-row-between">
				<span>销量100</span>
				<span>...</span>
			</p>
		</div>
		<div class="shop-item__tag">
			<img :src="newIcon"/>
		</div>
		<div class="shop-item__remove flex-column-center" v-if="removeShow">
			<div class="shop-remove__info" @click.stop="removeFn">
				<div class="shop-item__icon"></div>
				<p class="text-white MT-10">从商铺移除</p>	
			</div>
		</div>	
	</div>
</template>

<script>
import newIcon from '@/assets/images/index/new.png'
export default {
	data() {
		return {
			// 删除商品弹层是否显示
			removeShow: false,
			newIcon:newIcon
		}
	},
	methods: {
		/**
		 * 点击当前商品
		 */
		clickFn() {
			console.log('点击商品')
			this.$emit('click')
		},
		/**
		 * 移除当前商品
		 */
		removeFn() {
			console.log('移除商品')
			this.$emit('remove')
		},
		/**
		 * 长按商品
		 */
		longtap() {
			this.removeShow = true
		}
	}
}
</script>